<template>
  <div id='app'>
    <!-- 箭头 -->
    <van-icon name="arrow-left" class="arrows-position" size="2rem" @click="outGo"/>
    <!-- 箭头 -->
      <!-- 轮播区域 -->
<van-swipe class="my-swipe-ss" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="(c,i) in list.pics2" :key="i">
      <img :src="c" alt="">
  </van-swipe-item>
</van-swipe>
      <!-- 轮播区域 -->
      <div class="section-detail-style">
        <ul>
          <li>{{$route.query.name}}</li>
          <li>{{$route.query.characteristic}}</li>
          <li>
            <p>
              <span>低价￥{{$route.query.minPrice}}</span>
              <span>原价￥{{$route.query.id}}</span>
              </p>
            <p>库存{{$route.query.id-$route.query.minPrice}}</p>
          </li>
        </ul>
      </div>
      <!-- tab切换 -->
      <div class="foot-detail-tab">
        <p :class="{'class-bottom-color':colorRed==0}" @click="productsIntroduction">商品介绍</p>
        <p :class="{'class-bottom-color':colorRed==1}" @click="commentOnCommodity">商品评价</p>
      </div>
      <!-- tab切换 -->
      <div v-html="list.content" v-show="colorRed==0" class="footer-detail">

      </div>


<van-goods-action >
  <van-goods-action-icon icon="chat-o" text="客服" />
  <van-goods-action-icon icon="shop-o" text="店铺" />
  <van-goods-action-icon icon="star-o" text="收藏" />
 <van-goods-action-button type="warning" text="加入购物车" @click="add "/>
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      colorRed:'0',
    }
  },
  methods: {
      get(){
          this.$request.detail({
              id:this.$route.query.id
          }).then(res=>{
              this.list=res.data.data
              console.log(res.data.data);
              
          })
      },
      outGo(){
        this.$router.back()
      },
      productsIntroduction(){
        this.colorRed='0'
      },
      commentOnCommodity(){
        this.colorRed='1'

      },
      add(){
        this.$store.commit('add',this.$route.query)
       
      }

  },
  mounted() {
      this.get()

  },
  components: {

  }
}
</script>

<style lang='scss'>
.footer-detail{
  width: 100%;
  img{
    width: 100% !important;
    height: auto !important;
  }
}

.class-bottom-color{
  border-bottom:2px solid red ;
}
.foot-detail-tab{
  width: 100%;
  height: 60px;
  margin-top: 2vh;
  display: flex;

  p{
    width: 50%;
    height: 100%;
    font-size: 24px;
    display: flex;
    justify-content: center;align-items: center;

  }
}
.my-swipe-ss{
    width: 100%;
    height: 60vh;
    img{
        width: 100%;
        height: 100%;
    }
}
.arrows-position{
  position: fixed;
  left: 4vw;
  top: 2vh;
  z-index: 766;
}
.section-detail-style{
  width: 100%;
  height: 100px;
  padding: 0 10px;

  ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    color: #ccc;
    li:nth-child(1){
      font-size: 18px;
      color: black;

    }
    li:nth-child(2){
      font-size: 14px;

    }
    li:nth-child(3){
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      span:nth-child(1){
              color: red;
              font-size: 16px;
              margin-right: 3vw;

      }

    }
  }

}

</style>
